import { useQuery } from '@tanstack/react-query';
import { useCatch } from '@/hooks';
import EventCenterServices from '@/api/services/eventCenterServices.ts';
import { createStyles } from 'antd-style';
import { FC } from 'react';
import { Flex, Tooltip } from 'antd';
import './color.css';
import { getColor } from '@/pages/eventCenter/utils.ts';
import { AlarmHandleStatus } from '#/enmu.ts';
import { useRouter } from '@/router/hooks';

const useCardStyle = (bg: string, color: string) =>
  createStyles(({ css }) => {
    return {
      cardWrapper: css`
        background-color: #4c68ff1a;
        padding: 16px 0 16px 16px;
        border-radius: 8px;
        color: var(--ycx-font-color-l2);
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        width: 345px;
        cursor: pointer;
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;

        &:hover {
          border: 1px solid var(--ycx-primary-color);

          &:after {
            display: none;
          }
        }

        &:after {
          content: '';
          height: 100%;
          width: 2px;
          position: absolute;
          top: 0;
          left: 0;
          background-color: ${color};
        }
      `,
      status: css`
        position: absolute;
        top: 0;
        right: 0;
        background-color: ${bg};
        color: ${color};
        padding: 1px 9px;
        border-bottom-left-radius: 8px;
      `,

      img: css`
        width: 72px;
        height: 72px;
        border-radius: 8px;
      `,
      itemTitle: css`
        color: var(--ycx-font-color-l3);
      `,
      ellipsis: css`
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      `,
    };
  });

type CardProps = {
  imgUrl: string;
  alarmType: string;
  position: string;
  alarmDate: string;
  status: keyof typeof AlarmHandleStatus;
};

const Card: FC<CardProps> = ({ imgUrl, alarmDate, position, alarmType, status }) => {
  const { bg, ring } = getColor(status);
  const { styles } = useCardStyle(ring, bg)();
  const router = useRouter();

  return (
    <Flex className={styles.cardWrapper} gap={16} onClick={() => router.push('/event-center')}>
      <div className={styles.status}>{AlarmHandleStatus[status]}</div>
      <img className={styles.img} src={`https://oss.uconcern.com/${imgUrl}`} alt="" />

      <Flex vertical gap={4}>
        <Flex gap={12}>
          <span className={styles.itemTitle}>病害类型</span>
          <span>{alarmType}</span>
        </Flex>
        <Flex gap={12}>
          <span className={styles.itemTitle}>事件位置</span>
          <span className={styles.ellipsis}>
            <Tooltip title={position} placement="topLeft">
              {position}
            </Tooltip>
          </span>
        </Flex>
        <Flex gap={12}>
          <span className={styles.itemTitle}>报警时间</span>
          <span>{alarmDate}</span>
        </Flex>
      </Flex>
    </Flex>
  );
};

const useStyle = createStyles(({ css }) => {
  return {
    btn: css`
      background-color: #4c68ff1a;
      border-radius: 8px;
      text-align: center;
      padding: 7px 0;
      color: var(--ycx-font-color-l2);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */
      cursor: pointer;
    `,
  };
});

const EventCenterList = () => {
  const catchFn = useCatch();
  const { styles } = useStyle();
  const router = useRouter();

  const { data } = useQuery({
    queryKey: ['eventCenterList'],
    queryFn: () =>
      catchFn(() =>
        EventCenterServices.getEventCenterList({
          page: 1,
          limit: 4,
          order: 'id DESC',
        }),
      ),
    select: ({ data }) => data,
  });

  return (
    <>
      <Flex vertical gap={8}>
        {data?.map((item) => (
          <Card
            key={item.id}
            imgUrl={item.imageList[0].fileUrl}
            alarmType={item.alarmDesc}
            position={item.alarmPosition}
            alarmDate={item.alarmTime}
            status={item.handleStatus}
          />
        ))}
        <div className={styles.btn} onClick={() => router.push('/event-center')}>
          查看更多
        </div>
      </Flex>
    </>
  );
};

export default EventCenterList;
